<template>
    <a-layout style="height: 100%;">
        <PluginComp Plugin="Portal.Header">
            <template #CenterMenu>
                <a-menu class="MenuStyle" v-model:selectedKeys="current" mode="horizontal" :items="items" />
            </template>
        </PluginComp>
        <a-layout class="Layout" :style="{
            backgroundColor: token.colorBgContainer,
        }">
            <router-view></router-view>
        </a-layout>
    </a-layout>
</template>

<script setup>
// 基础引用
import { ref, h } from 'vue';
import { useRoute, RouterLink } from 'vue-router';
import { theme } from 'ant-design-vue';
const { token } = theme.useToken();
const route = useRoute();
const current = ref([]);

if (route.name == 'AppHome' || route.name == 'AppMain') {
    current.value[0] = 'AppHome'
} else {
    current.value[0] = route.name
}

const items = ref([{
    key: 'AppHome',
    label: h(RouterLink, { to: `/app/home` }, { default: () => '我的应用' }),
    title: '我的应用',
}, {
    key: 'AppPluginManager',
    label: h(RouterLink, { to: `/app/PluginManager` }, { default: () => '插件管理' }),
    title: '插件管理',
}]);

</script>

<style lang="less" scoped>
.Layout {
    overflow-y: auto;
}

.MenuStyle {
    height: 48px;
    line-height: 48px;
    justify-content: center;
    // pointer-events: ;
}

.LogoTitle {
    font-size: 20px;
    margin-left: 16px;
    font-weight: bold;
}
</style>